<!-- 会议投票 编辑/新增 -->
<template>
  <app-page card full>
    <template #header>{{ $route.query.id ? '编辑会议投票' : '新增会议投票' }}</template>

    <jax-info title="基本信息">
      <div class="base-info">
        <el-form-item label="标题名称" label-width="115">
          <el-input v-model="pageData.detail.title" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="投票倒计时时间" label-width="115">
          <el-input-number
            v-model="pageData.detail.countDown"
            placeholder="请输入"
            style="width: 100%"
            :min="0"
          >
            <template #suffix>
              <span>分钟</span>
            </template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="主题类型" label-width="115">
          <el-radio-group v-model="pageData.detail.type">
            <el-radio label="单主题" :value="0" />
            <el-radio label="多主题" :value="1" />
          </el-radio-group>
        </el-form-item>
        <template v-if="pageData.detail.type === 0">
          <el-form-item label="是否多选" label-width="115">
            <div>
              <el-switch v-model="pageData.detail.isMulti" />
              <template v-if="pageData.detail.isMulti">
                <div class="is-multi-wrapper">
                  <div class="app-flex-mid is-multi-wrapper__item">
                    最少要选<el-input-number
                      v-model="pageData.detail.minSelect"
                      placeholder="请输入"
                      :min="0"
                    />
                    个选项
                  </div>
                  <div class="app-flex-mid is-multi-wrapper__item">
                    最多要选<el-input-number
                      v-model="pageData.detail.maxSelect"
                      placeholder="请输入"
                      :min="0"
                    />
                    个选项
                  </div>
                </div>
              </template>
            </div>
          </el-form-item>
        </template>

        <template v-if="pageData.detail.type === 1">
          <el-form-item label="主题名称" label-width="115">
            <div class="options-wrapper">
              <div
                class="app-flex-mid options-wrapper__item"
                v-for="(item, index) in pageData.detail.topics"
                :key="index"
              >
                <el-button
                  type="danger"
                  icon="minus"
                  circle
                  size="small"
                  @click="handleDeleteOption(index, 'topics')"
                />
                <el-input
                  v-model="pageData.detail.topics[index]"
                  :placeholder="`请输入第${index + 1}项（30字内）`"
                  style="width: 100%"
                />
              </div>
              <div class="app-flex-mid options-wrapper__item btn-wrapper">
                <el-button
                  type="primary"
                  icon="plus"
                  circle
                  size="small"
                  @click="handleAddOption('topics')"
                />
                已添加{{ pageData.detail.topics?.length }}项（最多添加10项）
              </div>
            </div>
          </el-form-item>
        </template>

        <el-form-item label="投票内容项" label-width="115">
          <div class="options-wrapper">
            <div
              class="app-flex-mid options-wrapper__item"
              v-for="(item, index) in pageData.detail.options"
              :key="index"
            >
              <el-button
                type="danger"
                icon="minus"
                circle
                size="small"
                @click="handleDeleteOption(index, 'options')"
              />
              <el-input
                v-model="pageData.detail.options[index]"
                :placeholder="`请输入第${index + 1}项（30字内）`"
                style="width: 100%"
              />
            </div>
            <div class="app-flex-mid options-wrapper__item btn-wrapper">
              <el-button type="primary" icon="plus" circle size="small" @click="handleAddOption('options')" />
              已添加{{ pageData.detail.options?.length }}项（最多添加1000项）
            </div>
          </div>
        </el-form-item>
      </div>
    </jax-info>

    <jax-info title="投票人员范围">
      <SearchExportImportUsers v-model="pageData.detail.users" />
    </jax-info>

    <template #footer>
      <div class="app-toolbar">
        <el-button type="default" @click="pageActions.handleCancel()">返回</el-button>
        <el-button type="primary" @click="pageActions.handleDirectSubmit(true)">保存</el-button>
      </div>
    </template>
  </app-page>
</template>

<script setup>
import { usePageEdit } from 'jax-node'
import { ElMessage, ElMessageBox } from 'element-plus'
import SearchExportImportUsers from '../../components/SearchExportImportUsers.vue'

const route = useRoute()
const { pageData, pageActions } = usePageEdit({
  api: 'meet/vote',
  defaultDetail: {
    meetId: route.query.meetId,
    options: [],
    type: '0',
    topics: [],
  },
})

const handleAddOption = type => {
  if (type === 'options' && pageData.detail.options.length >= 1000) {
    ElMessage.warning('最多添加1000项')
  } else if (type === 'topics' && pageData.detail.topics.length >= 10) {
    ElMessage.warning('最多添加10项')
  } else {
    pageData.detail[type].push('')
  }
}
const handleDeleteOption = (index, type) => {
  ElMessageBox.confirm('是否确定删除?', '温馨提示', {
    type: 'warning',
  }).then(() => {
    pageData.detail[type].splice(index, 1)
  })
}
</script>

<style lang="scss" scoped>
.base-info {
  width: 500px;
}
.is-multi-wrapper {
  &__item {
    gap: 10px;
    margin-top: 10px;
  }
}
.options-wrapper {
  width: 100%;
  &__item {
    gap: 15px;
    &:not(:last-child) {
      margin-bottom: 10px;
    }
    &.btn-wrapper {
      color: var(--el-color-primary);
    }
  }
}
</style>
